<template>
  <div>
    <el-card>
      <el-form :inline="true" ref="form" label-width="90px" size="mini">
        <el-form-item label="订单编号">
          <el-input placeholder="请输入订单编号" v-model="order.id"></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-select placeholder="请选择" v-model="order.status">
            <el-option label="待取件" :value="1"></el-option>
            <el-option label="已取件" :value="2"></el-option>
            <el-option label="网点入库" :value="3"></el-option>
            <el-option label="待装车" :value="4"></el-option>
            <el-option label="运输中" :value="5"></el-option>
            <el-option label="网点出库" :value="6"></el-option>
            <el-option label="待派送" :value="7"></el-option>
            <el-option label="派送中" :value="8"></el-option>
            <el-option label="已签收" :value="9"></el-option>
            <el-option label="拒收" :value="10"></el-option>
            <el-option label="已取消" :value="11"></el-option>
            <el-option label="全部" :value="0"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="付费状态">
          <el-select placeholder="请选择" v-model="order.paymentStatus">
            <el-option label="全部" :value="0"></el-option>
            <el-option label="已付" :value="1"></el-option>
            <el-option label="未付" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <br>
        <el-form-item label="发件人姓名">
          <el-input placeholder="请输入发件人姓名" v-model="order.senderName"></el-input>
        </el-form-item>
        <el-form-item label="发件人电话">
          <el-input placeholder="请输入发件人电话" suffix-icon=“xxxx” v-model="order.senderPhone"></el-input>
        </el-form-item>
        <el-form-item label="发件人地址">
          <el-cascader :options="options" @change="getSender" clearable></el-cascader>
        </el-form-item>
        <br>
        <el-form-item label="收件人姓名">
          <el-input placeholder="请输入收件人姓名" v-model="order.receiverName"></el-input>
        </el-form-item>
        <el-form-item label="收件人电话">
          <el-input placeholder="请输入收件人电话" suffix-icon=“xxxx” v-model="order.receiverPhone"></el-input>
        </el-form-item>
        <el-form-item label="收件人地址">
          <el-cascader :options="options" @change="getReceiver" filterable clearable></el-cascader>
        </el-form-item>
        <br>
        <el-form-item>
          <el-button @click="selectOrder()">查询</el-button>
          <el-button @click="qk()">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-divider></el-divider>
    <el-card>
      <!-- 表 -->
      <el-table :data="tableData" v-loading="loading" style="width: 100%">
        <el-table-column prop="id" label="订单编号" width="200"></el-table-column>
        <el-table-column prop="createTime" label="下单时间" width="200"></el-table-column>
        <el-table-column prop="status" label="订单状态" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.status === 1">待取件</span>
            <span v-if="scope.row.status === 2">已取件</span>
            <span v-if="scope.row.status === 3">网点入库</span>
            <span v-if="scope.row.status === 4">待装车</span>
            <span v-if="scope.row.status === 5">运输中</span>
            <span v-if="scope.row.status === 6">网点出库</span>
            <span v-if="scope.row.status === 7">待派送</span>
            <span v-if="scope.row.status === 8">派送中</span>
            <span v-if="scope.row.status === 9">已签收</span>
            <span v-if="scope.row.status === 10">拒收</span>
            <span v-if="scope.row.status === 11">已取消</span>
          </template>
        </el-table-column>
        <el-table-column prop="senderName" label="发件人姓名" width="120"></el-table-column>
        <el-table-column prop="senderPhone" label="发件人电话" width="120"></el-table-column>
        <el-table-column label="发件人地址" width="350">
          <template slot-scope="scope">
              <span v-if="scope.row.senderAddress" v-text="scope.row.senderAddress">
              </span>
          </template>
        </el-table-column>
        <el-table-column label="收件人地址" width="350">
          <template slot-scope="scope">
              <span v-if="scope.row.receiverAddress" v-text="scope.row.receiverAddress">
              </span>
          </template>
        </el-table-column>
        <el-table-column prop="pickupType" label="取件类型" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.pickupType === 1">
              网点自寄
            </span>
            <span v-if="scope.row.pickupType === 2">
              上门取件
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="paymentMethod" label="付费类型" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.paymentMethod === 1">
              预结
            </span>
            <span v-if="scope.row.paymentMethod === 2">
              到付
            </span>
          </template>
        </el-table-column>
        <el-table-column prop="paymentStatus" label="付费状态" width="120">
          <template slot-scope="scope">
            <span v-if="scope.row.paymentStatus === 1">
              已付
            </span>
            <span v-if="scope.row.paymentStatus === 2">
              未付
            </span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100px">
          <template slot-scope="scope">
            <el-button type="text" @click="tz(scope.row.id)">详情</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div style="text-align: center">
        <br>
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[5, 10, 15, 20]"
          :page-size="size"
          layout="total, sizes, prev, pager, next, jumper"
          :total="sizes">
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>
<script>
import OrderAPI from '../../../../src/api/logisticsmanagement/ordermanagement/orderAPI'

export default {
  name: 'orderList',
  data() {
    return {
      // 加载条
      loading: false,
      page: 1,
      size: 5,
      sizes: 0,
      tableData: [],
      order: {
        id: '',
        orderType: 0,
        paymentStatus: 0,
        senderName: '',
        senderPhone: '',
        senderProvinceId: '',
        senderCityId: '',
        senderCountyId: '',
        receiverName: '',
        receiverPhone: '',
        receiverProvinceId: '',
        receiverCityId: '',
        receiverCountyId: '',
        status: 0
      },
      orderQK: {
        id: '',
        orderType: 0,
        paymentStatus: 0,
        senderName: '',
        senderPhone: '',
        senderProvinceId: '',
        senderCityId: '',
        senderCountyId: '',
        receiverName: '',
        receiverPhone: '',
        receiverProvinceId: '',
        receiverCityId: '',
        receiverCountyId: '',
        status: 0
      },
      options: []
    }
  },
  methods: {
    getPdAreaTree() {
      OrderAPI.getPdAreaTree().then(({data}) => {
        this.dg(data.data)
        this.options = data.data
      })
    },
    selectOrder() {
      this.loading = true
      OrderAPI.selectOrder(this.page, this.size, this.order).then(({data}) => {
        this.page = data.data.current
        this.size = data.data.size
        this.sizes = data.data.total
        this.tableData = data.data.records
        this.loading = false
      })
    },
    qk() {
      this.order = this.orderQK
    },
    // 显示数
    handleSizeChange(v) {
      this.size = v
      this.selectOrder()
    },
    // 上下页
    handleCurrentChange(v) {
      this.page = v
      this.selectOrder()
    },
    // 利用递归删除一个不必要属性
    dg(data) {
      if (data != null) {
        for (var i = 0; i < data.length; i++) {
          if (data.length > 0) {
            if (data[i].children.length > 0) {
              this.dg(data[i].children)
            } else {
              delete data[i].children
            }
          }
        }
      }
    },
    getSender(value) {
      this.order.senderProvinceId = value[0]
      this.order.senderCityId = value[1]
      this.order.senderCountyId = value[2]
    },
    getReceiver(value) {
      this.order.receiverProvinceId = value[0]
      this.order.receiverCityId = value[1]
      this.order.receiverCountyId = value[2]
    },
    tz(oid) {
      this.$router.push({path: '/xiangqing', query: {id: oid}})
    }
  },
  created() {
    this.getPdAreaTree()
    this.selectOrder()
  }
}
</script>
<style>

</style>
